<script setup>
import { watchEffect, ref } from 'vue';
import { useRoute } from 'vue-router';
import { nanoid } from 'nanoid';
import Bread from '@/components/Bread.vue';
import DetailSales from './components/DetailSales.vue';
import ShopDesc from './components/ShopDesc.vue';
import GoodsDesc from './components/GoodsDesc.vue';
import HotPanel from './components/HotPanel.vue';
import ImageView from './components/ImageView.vue';
import DetailSku from './components/DetailSku.vue';
import { useDetailStore } from '@/stores/detail.js';
import { useCartStore } from '@/stores/cart.js';
const detailStore = useDetailStore();
const route = useRoute();

watchEffect(async () => {
	await detailStore.getGoods(route.params.id);
})

const cartStore = useCartStore();
let skuObj = {}
const skuChange = (sku) => {
	skuObj = sku
}
const count = ref(1)
const countChange = (count) => {
	console.log(count);
}

const addCartHandle = async () => {
	if (skuObj.value?.id) {
		cartStore.addCart({
			id: detailStore.goods.id,
			name: detailStore.goods.name,
			picture: detailStore.goods.mainPictures[0],
			price: detailStore.goods.price,
			count: count.value,
			skuId: skuObj.value.id,
			attrsText: skuObj.value.specs?.map(item => item.name + ':' + item.valueName).join(' '),
			selected: true
		})
		count.value = 1
	} else {
		//规格没有选择 提示用户
		ElMessage.warning('请选择规格')
	}
}

</script>
<template>
	<div class="detail">
		<div class="container">
			<Bread :breadList="[
				{ id: nanoid(), name: detailStore.goods.categories?.[1].name, path: `/category/${detailStore.goods.categories?.[1].id}` },
				{ id: nanoid(), name: detailStore.goods.categories?.[0].name, path: `/category/sub/${detailStore.goods.categories?.[0].id}` },
				{ id: nanoid(), name: detailStore.goods.name, path: null }
			]" />
			<div class="goods-info">
				<div class="info-left">
					<ImageView />
					<DetailSales class="goods-sales" />
				</div>
				<div class="info-right">
					<ShopDesc class="goods-desc" />
					<DetailSku @addCartSku-event="skuChange" />
					<!-- 数据组件 -->
					<el-input-number :min="1" v-model="count" @change="countChange" />
					<el-button class="addCartBtn" @click="addCartHandle">加入购物车</el-button>
				</div>

			</div>
			<div class="goods-footer">
				<GoodsDesc />
				<div class="goods-hot">
					<!-- 24小时热榜 -->
					<HotPanel :type="1" />
					<!-- 周热榜 -->
					<HotPanel :type="2" />
				</div>
			</div>
		</div>
	</div>
</template>
<style scoped lang="scss">
.goods-info {
	background-color: #fff;
	padding: 20px 40px;
	display: flex;

	.info-right {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-left: 40px;

		.addCartBtn {
			margin-top: 20px;
		}
	}
}

.goods-footer {
	margin-top: 20px;
	display: flex;
	justify-content: space-between;

}
</style>